<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <div class="search-container" >
      <el-form ref="queryFormRef" :model="queryParams" :inline="true" >
        <el-form-item label="邀请码" prop="keywords">
          <el-input
            v-model="queryParams.keywords"
            placeholder="请输入邀请码"
            @keyup.enter="handleQuery"
          />
        </el-form-item>

        

        <el-form-item label="状态" prop="status">
          <el-select
            v-model="queryParams.status"
            placeholder="全部"
            clearable
            style="width: 150px"
          >
          
            <el-option :label="'全部'" :value="''" />
            <el-option :label="'待审核'" :value="'1'" />
            <el-option :label="'通过'" :value="'2'" />
            <el-option :label="'驳回'" :value="'3'" />
          </el-select>
        </el-form-item>    

        <el-form-item label="转账哈希" prop="hashVal">
          <el-input
            v-model="queryParams.hashVal"
            placeholder="请输入转账哈希"
            @keyup.enter="handleQuery"
          />
        </el-form-item>


        <el-form-item label="币种" prop="currency">
          <el-select
            v-model="queryParams.currency"
            placeholder="全部"
            clearable
            style="width: 150px"
          >
            <el-option label="波场" :value="'tron'" />
            <el-option label="币安" :value="'bnb'" />
          </el-select>
        </el-form-item> 

        <el-form-item class="search-buttons">
          <el-button class="filter-item" type="primary" icon="search" @click="handleQuery">
            搜索
          </el-button>
          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>


        </el-form-item>
      </el-form>
    </div>
  
    <el-card shadow="hover" class="data-table">
      <el-table
        v-loading="loading"
        :data="Lists"
        row-key="id"
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        class="data-table__content"
        @selection-change="handleSelectionChange"
      >

        <el-table-column prop="id" label="序号" width="120" />
        <el-table-column prop="userId" label="用户ID" />
        <el-table-column prop="userInfo.markId" label="邀请码" />

        
        <el-table-column prop="fromAddress" label="转账地址" />
        <el-table-column prop="toAddress" label="接收地址" />
        <el-table-column prop="imgProof" label="充值凭证" >
          <template #default="scope">
            <el-image
              style="width: 50px; height: 50px; z-index: 99; border-radius: 50%"
              :src="scope.row.imgProof || 'https://xcx.yumeishangmao.com/uploads/8b112625e64da7e7dc69fab1044487e5.png'"
              @click="handlePreview(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="state" label="审核状态" >
            <template #default="scope">
              <span v-if="scope.row.state === 1">待审核</span>
              <span v-else-if="scope.row.state === 2" style="color: green;font-weight: bold;">通过</span>
              <span v-else style="color: red;font-weight: bold;">驳回</span>
            </template>
        </el-table-column>

        <el-table-column prop="amount" label="转账金额" />
        <el-table-column prop="hash" label="转账哈希" />
        <el-table-column prop="type" label="币种" width="120">
          <template #default="scope">
            <span v-if="scope.row.type === 0">波场</span>
            <span v-else>币安</span>
          </template>
        </el-table-column>

        <el-table-column prop="createdAt" label="创建时间" width="180">

        </el-table-column>

        <el-table-column label="操作" fixed="right" align="left" width="200">
          <template #default="scope">
            
            <!-- <el-button
              v-hasPerm="['finance:charge:query']"
              type="primary"
              link
              size="small"
              icon="edit"
              @click.stop="handleOpenDialog(scope.row.id,scope.row)"
            >
              编辑
            </el-button> -->

            <block v-if="scope.row.state === 1">
              <el-button type="primary"
                link
                size="small"
                icon="edit"
                @click.stop="handleSubmit2(scope.row.id,2)">
                通过
              </el-button>  
            <el-button type="primary" 
              link
              size="small"
              icon="edit"
              @click.stop="handleSubmit2(scope.row.id,3)">
              驳回
            </el-button>
            </block>
            <block v-else>
              <span>已操作</span>
            </block>
            
          </template>
        </el-table-column>
      </el-table>

       <pagination
            v-if="total > 0"
            v-model:total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="handleQuery"
          />
    </el-card>

    <el-dialog
      v-model="dialog.visible"
      :title="dialog.title"
      width="600px"
      @closed="handleCloseDialog"
    >
      <el-form ref="FormRef" :model="formData" :rules="rules" label-width="120px">
        
        <el-form-item label="状态" >
          <el-radio-group v-model="formData.state">
            <el-radio :value="2">通过</el-radio>
            <el-radio :value="3">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="handleCloseDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <div class="preview-container" v-if="showPreview">
                <div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 2000;" @click="showPreview = false"></div>
                <div style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2001;">
                    <img :src="previewImage" class="preview-image" @click="showPreview = false">
                </div>
            </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "充值审批列表",
  inheritAttrs: false,
});

import FinanceAPI, { ChargeVO } from "@/api/system/finance.api";

const showPreview = ref(false);
const previewImage = ref('');
function handlePreview(row: any) {
  previewImage.value = row.imgProof;
  showPreview.value = true;
}

const queryFormRef = ref();
const FormRef = ref();

const loading = ref(false);
const selectIds = ref<number[]>([]);

const queryParams = reactive<any>({
  pageNum: 1,
  pageSize: 10,
  operateType: "",
});


const total = ref(0);

const dialog = reactive({
  title: "",
  visible: false,
});

const Lists = ref<ChargeVO[]>();
const formData = reactive<any>({
  id: "",
  status: 1,
  auditTime: "",
});

const rules = reactive({
  status: [{ required: true, message: "请选择状态", trigger: "change" }],
});

// 查询
function handleQuery() {

  const json = {
    pageNum: queryParams.pageNum || 1,
    pageSize: queryParams.pageSize|| 10,
    status: queryParams.status || "",
    keywords:queryParams.keywords || "",
    hashVal:queryParams.hashVal || "",
    currency:queryParams.currency || "",
  };
  console.log(queryParams)
  loading.value = true;

  FinanceAPI.ListAudit(json)
    .then((res) => {
      Lists.value = res.data;
      total.value = res.total || 0;
      console.log("查询结果:", res);
    })
    .catch((error) => {
      console.error("查询失败:", error);
    })
    .finally(() => {
      loading.value = false;
    });
}

// 重置查询
function handleResetQuery() {
  queryFormRef.value.resetFields();
  handleQuery();
}

// 处理选中项变化
function handleSelectionChange(selection: any) {
  selectIds.value = selection.map((item: any) => item.id);
}



/**
 * 打开新增弹窗
 *
 * @param Id ID
 */
async function handleOpenDialog(Id?:string,data?:ChargeVO) {

  dialog.visible = true;
  if (Id) {
    dialog.title = "修改";
    Object.assign(formData, data);
  } else {
    dialog.title = "新增";
  }
}

// 提交表单
function handleSubmit() {
  
      const json = {
        dataId:formData.id,
        approveState:formData.state
      }
      FinanceAPI.ListAuditDo(json)
        .then(() => {
          ElMessage.success("操作成功");
          handleCloseDialog();
          handleQuery();
        })
        .finally(() => (loading.value = false));
      
}


function handleSubmit2(id: number, state: number) {
  
      const json = {
        dataId: id,
        approveState: state
      }
      FinanceAPI.ListAuditDo(json)
        .then(() => {
          ElMessage.success("操作成功");
          handleQuery();
        })
        .finally(() => (loading.value = false));
      
  
}



// 重置表单
function resetForm() {
  FormRef.value.resetFields();
  FormRef.value.clearValidate();
}

// 关闭弹窗
function handleCloseDialog() {
  dialog.visible = false;
  resetForm();
}

onMounted(() => {
  handleQuery();
});
</script>
<style>
.ei-flow-form .el-card__body {
  z-index: initial !important;
}
.preview-image {
  width: 80vw;
  height: auto;
  max-height: 90vh;
  object-fit: contain;
}
</style>
